<template>
  <div class="center">
    <n-card class="card">
      <QuestionForm v-if="!TabsType" />
      <VideoForm v-if="TabsType" />
    </n-card>
    <n-card content-style="padding: 0;">
      <n-tabs
        type="line"
        size="large"
        :tabs-padding="20"
        pane-style="padding: 20px;"
        @update:value="update"
      >
        <n-tab-pane name="试题">
          <Question v-if="!TabsType" />
        </n-tab-pane>
        <n-tab-pane name="视频">
          <Video v-if="TabsType" />
        </n-tab-pane>
        <template #suffix>
          <n-button size="small">新建</n-button>
        </template>
      </n-tabs>
    </n-card>
    <!--视频-->
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import Question from './Question/index.vue';
  import Video from './Video/index.vue';
  import QuestionForm from './Question/QuestionForm.vue';
  import VideoForm from './Video/VideoForm.vue';
  export default defineComponent({
    components: {
      Question,
      Video,
      QuestionForm,
      VideoForm,
    },
    setup() {
      const TabsType = ref(false);
      const update = (row) => {
        console.log(row);
        TabsType.value = row == '视频' ? true : false;
      };
      return {
        update,
        TabsType,
      };
    },
  });
</script>

<style lang="less" scoped>
  .center :deep .n-tabs-nav__suffix {
    padding: 0 20px;
  }
  .card {
    margin: 0 0 20px 0;
    box-shadow: 0px 3px 12px -4px rgba(51, 53, 60, 0.08);
    border-radius: 3px;
  }
  .card :deep .n-card__content {
    padding: 16px 20px;
  }
</style>
